<template>
  <div class="banner">
    <div class="swipe-wrapper">
      <van-swipe :autoplay="3000" >
        <van-swipe-item class="item" v-for="(item, index) in banner" :key="index">
          <img :src="item.pic" @click="goTo(item.href)" :href="item.href" ref="img"/>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
export default {
  name: 'banner',
  props: {
    banner: {
      type: Array
    }
  },
  data () {
    return {
      url: ''
    }
  },
  methods: {
    goTo (e) {
      if (e && e !== '') {
        window.location.href = e
      }
    }
  },
  mounted () {
    // console.log('bannert:kkkkkkkkkkkkkkk')
    // console.log('bannert:', this.banner)
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "~@/assets/main.styl";
  >>> .van-swipe{
      width vw(375)
      /*border 1px slateblue solid*/
    }
  >>>.van-swipe__indicators {
       transform translate3d(0,0,0)
       display flex
       position absolute
       left 10%
       bottom vw(10)
  }
  >>>.van-swipe__indicators > i {
       width 2vw
       height 2vw
       border 2px solid #fff
       background transparent
  }
  >>>.van-swipe__indicator:not(:last-child) {
      margin-right 6px
  }
  >>>.van-swipe__indicator {
    border-radius 100%
    background-color #fff
    width 6px
    height 6px
  }
  >>> .van-swipe__indicators .van-swipe__indicator--active {
    background-color #fff
  }


  img[lazy=loading]{
    width 100%
    height vw(173)
    /*border-radius main-radius*/
  }
  .swipe-wrapper{
    width 100%
    height vw(150)
  }
  .item{
    text-align center
    & img{
      width 100%
      height vw(173)
      /*border-radius main-radius*/
    }
  }
</style>
